<template>
    <!-- <div class="forum-manager-box card-box">
        <h5 class="card-title">
            <el-icon size="20" color="#FB8B24"><Operation /></el-icon>
            {{ $t('forum_manager.tit') }}
        </h5>
        <div class="card-text">
            <el-menu default-active="1" :default-openeds="defaultOpeneds">
                <el-sub-menu index="1">
                    <template #title>
                        <span>{{ $t('forum_manager.menu_1') }}</span>
                    </template>
                    <el-menu-item index="1-1">{{ $t('forum_manager.menu_1_1') }}</el-menu-item>
                    <el-menu-item index="1-2">{{ $t('forum_manager.menu_1_2') }}</el-menu-item>
                    <el-menu-item index="1-2">{{ $t('forum_manager.menu_1_3') }}</el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </div> -->
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const defaultOpeneds = ref(['1']) // 默认展开的菜单项
</script>

<style lang="less" scoped>
.forum-manager-box {
    margin-top: 24px;

    .el-menu {
        --el-menu-bg-color: transparent; // 背景色
        --el-menu-hover-bg-color: transparent; // hover时的行背景色
        --el-menu-base-level-padding: 1px;
        --el-menu-level-padding: 12px; // 左右内边距
        --el-menu-item-font-size: 15px; // 字体大小
        --el-menu-item-height: 25px; // 一级导航行高
        --el-menu-sub-item-height: 25px; // 二级导航行高

        border-right: none;

        .el-sub-menu {
            :deep(.el-menu) {
                padding: 4px 0;
            }

            :deep(.el-sub-menu__title) {
                flex-direction: row-reverse;
                justify-content: flex-end;

                .el-sub-menu__icon-arrow {
                    margin-right: 6px;
                    margin-top: 0;
                    position: static;
                    transform: rotate(-90deg) !important;
                }
            }

            &.is-opened {
                & > :deep(.el-sub-menu__title) {
                    .el-sub-menu__icon-arrow {
                        transform: rotate(0) !important;
                    }
                }
            }
        }
    }
}
</style>
